<template>
  <div class="drawer-item-main">
    <div class="drawer-item" ref="drawerItemRef">
      <div
        v-if="itemPos === 'right' || itemPos === 'left'"
        :class="drawerItemClass"
      >
        <!-- 右边区域的按钮 -->
        <div
          class="fold-btn"
          @click="handleBtnClick()"
          :style="{ width: setBtnWidth }"
          v-if="showBtn && itemPos === 'right'"
        >
          <slot name="button" :fold="itemVisible">
            <div class="row-btn">
              <drawer-btn :state="btnState" :btn-pos="'right'" />
            </div>
          </slot>
        </div>
        <div
          :style="{ width: setItemWidth }"
          class="item-area"
          v-show="itemVisible"
        >
          <slot name="content"></slot>
        </div>
        <!-- 左边区域的按钮 -->
        <div
          class="fold-btn"
          @click="handleBtnClick()"
          :style="{ width: setBtnWidth }"
          v-if="showBtn && itemPos === 'left'"
        >
          <slot name="button" :fold="itemVisible">
            <div class="row-btn">
              <drawer-btn :state="btnState" :btn-pos="'left'" />
            </div>
          </slot>
        </div>
      </div>
      <!-- 中部内容区 -->
      <div
        :style="{ width: setItemWidth, height: itemHeight + 'px' }"
        class="item-area center-area"
        v-if="itemPos === 'center'"
      >
        <slot></slot>
      </div>
      <div
        v-if="itemPos === 'top' || itemPos === 'bottom'"
        :class="drawerItemClass"
      >
        <!-- 底部区域的按钮 -->
        <div
          class="fold-btn"
          @click="handleBtnClick()"
          :style="{ height: setBtnHeight }"
          v-if="showBtn && itemPos === 'bottom'"
        >
          <slot name="button" :fold="itemVisible">
            <div class="column-btn">
              <drawer-btn :state="btnState" :btn-pos="'bottom'" />
            </div>
          </slot>
        </div>
        <div
          class="item-area"
          :style="{ height: itemHeight + 'px' }"
          v-show="itemVisible"
        >
          <slot name="content"></slot>
        </div>
        <!-- 顶部区域的按钮 -->
        <div
          class="fold-btn column-btn"
          @click="handleBtnClick()"
          :style="{ height: setBtnHeight }"
          v-if="showBtn && itemPos === 'top'"
        >
          <a-icon type="ellipsis" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import drawerBtn from "./drawer-btn";
export default {
  name: "DrawerItem",
  components: {
    drawerBtn
  },
  data() {
    return {
      itemWidth: 0,
      itemHeight: 0,
      itemVisible: false,
      buttonWidth: 0,
      buttonHeight: 0,
      btnState: "fold"
    };
  },
  props: {
    showBtn: {
      type: Boolean,
      default: true
    },
    itemPos: {
      type: String,
      //   default: "center",
      validator(val) {
        return ["top", "bottom", "left", "right", "center"].indexOf(val) !== -1;
      }
    },
    width: {
      type: [Number],
      default: 0
    },
    height: {
      type: [Number],
      default: 0
    },
    visible: {
      type: [Boolean],
      default: true
    },
    btnWidth: {
      type: [Number],
      default: 10
    },
    btnHeight: {
      type: [Number],
      default: 10
    }
  },
  computed: {
    // flex-direction: row || column
    drawerItemClass() {
      const itemPos = this.itemPos;
      return itemPos === "left" || itemPos === "right"
        ? "drawer-item"
        : "drawer-item-center";
    },
    setItemWidth() {
      const itemWidth = this.itemWidth;
      return itemWidth !== "auto" ? itemWidth + "px" : itemWidth;
    },
    setBtnWidth() {
      return this.buttonWidth + "px";
    },
    setBtnHeight() {
      return this.buttonHeight + "px";
    }
  },
  watch: {
    "$store.state.drawer.itemWidth.center": {
      handler(nval) {
        if (this.itemPos === "center") {
          this.itemWidth = nval;
        }
      }
    },
    "$store.state.drawer.itemHeight.center": {
      handler(nval) {
        if (this.itemPos === "center") {
          this.itemHeight = nval;
        }
      }
    },
    "$store.state.drawer.itemVisible": {
      handler(nval) {
        this.itemVisible = nval[this.itemPos];
      },
      deep: true,
      immediate: true
    },
    width: {
      handler(nval) {
        if (this.isLeftOrRight()) {
          const w = this.visible ? nval : 0;
          this.itemWidth = w;
          this.setItemSize("width", this.itemWidth);
        }
      },
      immediate: true
    },
    height: {
      handler(nval) {
        if (!this.isLeftOrRight()) {
          const h = this.visible ? nval : 0;
          this.itemHeight = h;
          this.setItemSize("height", this.itemHeight);
        }
      },
      immediate: true
    },
    visible: {
      handler(nval) {
        this.itemVisible = nval;
        this.$store.commit({
          type: "drawer/setItemVisible",
          itemPos: this.itemPos,
          visible: nval
        });
      },
      immediate: true
    },
    btnWidth: {
      handler(nval) {
        if (this.isLeftOrRight()) {
          this.buttonWidth = nval;
          this.$store.commit({
            type: "drawer/setBtnWidth",
            itemPos: this.itemPos,
            width: nval
          });
        }
      },
      immediate: true
    },
    btnHeight: {
      handler(nval) {
        if (!this.isLeftOrRight()) {
          this.buttonHeight = nval;
          this.$store.commit({
            type: "drawer/setBtnHeight",
            itemPos: this.itemPos,
            height: nval
          });
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.btnState = this.visible ? "unfold" : "fold";
  },
  methods: {
    isLeftOrRight(pos = null) {
      const itemPos = pos === null ? this.itemPos : pos;
      if (itemPos !== "center") {
        return itemPos === "left" || itemPos === "right" ? true : false;
      } else {
        return false;
      }
    },
    handleBtnClick(pos) {
      const itemPos = this.itemPos;
      let visible = this.$store.state.drawer.itemVisible[itemPos];
      this.btnState = visible ? "fold" : "unfold";
      visible = !visible;
      // 设置display属性
      this.$store.commit({ type: "drawer/setItemVisible", itemPos, visible });
      if (this.isLeftOrRight(pos)) {
        const width = visible ? this.width : 0;
        // 设置width
        this.setItemSize("width", width);
        this.itemWidth = width;
      } else {
        const height = visible ? this.height : 0;
        // 设置height
        this.setItemSize("height", height);
        this.itemHeight = height;
      }
    },
    setItemSize(str, value) {
      this.$store.commit({
        type: "drawer/setItemSize",
        itemPos: this.itemPos,
        str,
        value
      });
    }
  }
};
</script>
<style lang="less" scoped>
.drawer-item-main {
  .fold-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }
  .drawer-item {
    display: flex;
    height: 100%;
    .row-btn {
      background: red;
      width: 10px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .drawer-item-center {
    display: flex;
    flex-direction: column;
    width: 100%;
    .column-btn {
      background: red;
      width: 100%;
      height: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .item-area {
    width: 100%;
    height: 100%;
    // background: white;
  }
  .center-area {
    display: flex;
    flex-direction: column;
  }
}
</style>
